<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延时提示框</title>
</head>
<body>
<div id="div1" style="width: 150px;height: 150px;background: green;float: left"></div>
<div id="div2" style="width: 200px;height: 200px;background: #31b0d5;float: left;margin-left: 10px;display: none"></div>
<script>
    window.onload=function () {
        var div1=document.getElementById('div1');
        var div2=document.getElementById('div2');
         timer=null;
        div1.onmouseover=function () {
        clearTimeout(timer);
            div2.style.display='block';
        };


        div2.onmouseout=div1.onmouseout=function () {
       timer=setTimeout(function () {
    div2.style.display='none';
},500)
        };

   div2.onmouseover=function (ev) {
       clearTimeout(timer)
   };


    }
</script>
</body>
</html>